/***********************************************************
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License
 **********************************************************/
@import "../../../node_modules/@fluentui/react/dist/css/fabric.min.css";
@import "variables";
@import "themes";

@media screen and (min-width: $screenSize) {
    .app {
        height: 100vh;
        overflow-y: hidden;
        display: grid;
        grid-template-rows: $mastheadHeight $navigationHeight 1fr;
        grid-template-columns: 1fr;
        display: -ms-grid;
        -ms-grid-template-rows: $mastheadHeight $navigationHeight 1fr;
        -ms-grid-columns: 1fr;

        .masthead {
            grid-row: 1;
            grid-column: 1;
            -ms-grid-row: 1;
            -ms-grid-column: 1;
        }
        .navigation {
            grid-row: 2;
            grid-column: 1;
            -ms-grid-row: 2;
            -ms-grid-column: 1;
        }
        .content {
            grid-row: 3;
            grid-column: 1;
            -ms-grid-row: 3;
            -ms-grid-column: 1;
        }
    }
}
.app {
    font-family: "Segoe UI" !important;
    font-size: 14px !important;
    width: 100%;
    @include themify($themes) {
        color: themed("textColor");
        background: themed("backgroundColor");
    }

    .masthead {
        width: 100%;
    }

    .navigation {
        width: 100%;
    }

    .content {
        width: 100%;
    }
}
